<template>
  <div id="J_ContBox" class="m-content-box">
    <div class="m-set-order-box">
      <p class="title">
        提醒设置
        <span class="status">状态</span>
      </p>

      <router-link to="/system/memberRemind">
        <el-button class="set-order-edit" type="primary">返回</el-button>
      </router-link>

      <ul id="remindSetting" class="remindSetting-list"><li>
                                                          <div class="item">
                                                            <div class="lock">
                                                              <el-switch
                                                                v-model="value"
                                                                active-color="#13ce66"
                                                                inactive-color="#616b74"
                                                              />
                                                            </div>
                                                            <span class="label">会员生日：</span>
                                                            <div class="content"><span class="sublabel">会员生日前</span>
                                                              <el-input style="width: 82px; margin-right: 5px;" type="number" value="3" placeholder="请输入0~100的整数" />天提醒
                                                            </div>
                                                          </div>
                                                        </li>
        <li>
          <div class="item">
            <div class="lock">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#616b74"
              />
            </div>
            <span class="label">多天未上课：</span>
            <div class="content"><span class="sublabel">会员连续</span><el-input style="width: 82px; margin-right: 5px;" type="number" value="7" placeholder="请输入0~100的整数" />天未上课提醒</div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="lock">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#616b74"
              />
            </div>
            <span class="label">入会纪念日：</span>
            <div class="content"><span class="sublabel">会员入会纪念日前</span><el-input style="width: 82px; margin-right: 5px;" type="number" value="7" placeholder="请输入0~100的整数" />天提醒</div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="lock">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#616b74"
              />
            </div>
            <span class="label">会员卡有效期：</span>
            <div class="content"><span class="sublabel">有效期剩余</span><el-input style="width: 82px; margin-right: 5px;" type="number" value="10" placeholder="请输入0~100的整数" />天提醒</div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="lock">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#616b74"
              />
            </div>
            <span class="label">次数卡余额：</span>
            <div class="content"><span class="sublabel">次数卡不足</span><el-input style="width: 82px; margin-right: 5px;" type="number" value="7" placeholder="请输入0~100的整数" />次提醒</div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="lock">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#616b74"
              />
            </div>
            <span class="label">储值卡余额：</span>
            <div class="content"><span class="sublabel">储值卡不足</span><el-input style="width: 82px; margin-right: 5px;" type="number" value="300" placeholder="请输入0~100的整数" />元提醒</div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="lock">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#616b74"
              />
            </div>
            <span class="label">开卡：</span>
            <div class="content"><span class="sublabel">开卡日期前</span><el-input style="width: 82px; margin-right: 5px;" type="number" value="2" placeholder="请输入0~100的整数" />天提醒</div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="lock">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#616b74"
              />
            </div>
            <span class="label">请假到期：</span>
            <div class="content"><span class="sublabel">请假截止日期前</span><el-input style="width: 82px; margin-right: 5px;" type="number" value="2" placeholder="请输入0~100的整数" />天提醒</div>
          </div>
        </li></ul>
    </div>
    <div class="m-form-footer-btns">
      <el-button type="primary">保存</el-button>
      <el-button type="info">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      value: true
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '提醒设置',
      url: '/system/memberRemind',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true

      this.listLoading = false
    },
    open(type) {
      if (type === 'add') {
        this.add_show = false
      }
      if (type === 'update') {
        this.update_show = false
      }
    }

  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  font-size: 14px;
}
.top-btn-group {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: -18px;
  margin-bottom: 12px;
}
.setting-tips__normal {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  border: 1px dashed #f49352;
  color: #f49352;
}
.m-set-order-box {
  position: relative;
  margin-bottom: 30px;
}
.mb-30 {
  margin-bottom: 30px;
}
.tips-icon {
  margin-right: 8px;
}
img {
  max-width: 100%;
}
img {
  border: 0;
}
.m-set-order-box .title {
  position: relative;
  color: #787878;
  font-size: 12px;
  height: 22px;
}
.set-normal-list li:nth-child(odd) {
  background: #f2f2f2;
}

.set-normal-list li {
  position: relative;
  min-height: 19px;
  padding: 10px 10px 10px 170px;
}
.set-normal-list .label {
  position: absolute;
  left: 10px;
  top: 10px;
}
ul, dl, ol {
  list-style: none;
  padding: 0;
  margin-top: 0;
}
p {
  margin: 0;
  padding: 0;
  font-weight: 400;
}
.set-order-edit {
  position: absolute;
  right: 0;
  top: -20px;
}
.m-set-order-box .title .status {
  position: absolute;
  right: 150px;
}
.set-normal-list .status {
  position: absolute;
  right: 110px;
  top: 10px;
}
.remindSetting-list .item {
  position: relative;
  padding: 4px 0;
}
.remindSetting-list .item .lock {
  position: absolute;
  right: 120px;
  top: 7px;
}
.remindSetting-list .item .label {
  position: absolute;
  left: 10px;
  top: 10px;
}
.remindSetting-list .item .content {
  width: 320px;
  margin: 0 auto;
}
.remindSetting-list .item .sublabel {
  display: inline-block;
  width: 115px;
  text-align: right;
  padding-right: 5px;
}
.remindSetting-list li:nth-child(odd) {
  background: #f2f2f2;
}
.m-form-footer-btns {
  padding: 40px 0;
  text-align: center;
}
</style>
